<template>
  <div class="sanstyle">
    <!--左边 B-->
    <div>
      <div class="ssl">
        <!--标题 B-->
        <div class="sstitle">
          <div class="twz">
            <span class="dwz">采集数据</span>
            <br />
            <span class="xwz">Collect data</span>
          </div>
        </div>
        <!--标题 E-->

        <!--三栏布局B-->
        <div class="stjqy">
          <div class="bdbk" style="height: 20%;overflow: hidden;">
            <div class="xsl">
              <div>
                <span style="color: white; font-size: 0.16rem">参与工作人数</span>
                <div>
                  <span style="color: #2efff2; font-size: 0.24rem">{{
                    personNum
                  }}</span>
                  <span style="font-size: 0.18rem; color: white">人</span>
                </div>
              </div>
              <div>
                <span style="color: white; font-size: 0.16rem">巡护次数</span>
                <div>
                  <span style="color: #917fff; font-size: 0.24rem">{{
                    patrolNum
                  }}</span>
                  <span style="font-size: 0.18rem; color: white">次</span>
                </div>
              </div>
            </div>
            <div class="xsl">
              <div>
                <span style="color: white; font-size: 0.16rem">数据采集</span>
                <div>
                  <span style="color: #fff27f; font-size: 0.24rem">{{
                    dataNum
                  }}</span>
                  <span style="font-size: 0.18rem; color: white">条</span>
                </div>
              </div>
              <div>
                <span style="color: white; font-size: 0.16rem">巡护距离</span>
                <div>
                  <span style="color: #34ceff; font-size: 0.24rem">{{
                    distance
                  }}</span>
                  <span style="font-size: 0.18rem; color: white">km</span>
                </div>
              </div>
            </div>
          </div>
          <div class="bdbk" style="height: 40%; position: relative;overflow: hidden;">
            <div class="llbt">
              <span class="dwz" style="line-height: 0">重要事件统计</span>
              <br />
              <span class="xwz" style="line-height: 0">Important event statistics</span>
            </div>

            <div class="charts" id="bar1"></div>
          </div>
          <div style="height: 40%; position: relative;overflow: hidden;">
            <div class="llbt">
              <span class="dwz" style="line-height: 0">普通事件统计</span>
              <br />
              <span class="xwz" style="line-height: 0">Ordinary event statistics</span>
            </div>

            <div class="charts" id="bar2" style="height: 2.1rem;"></div>
          </div>
        </div>
        <!--三栏布局E-->
      </div>
    </div>
    <!--左边 E-->
    <!--中间 B-->
    <div style="position: relative">
      <div class="bzxq">
        <div v-for="(item, index) in tclist" :key="index">
          <div><img :src="item.ico" alt="" /></div>
          <div>
            <span :style="{ color: item.color }">{{ item.num }}</span>
            <br />
            <span>{{ item.name }}</span>
          </div>
        </div>
      </div>
      <div class="openlayers">
        <div class="gof" @click.stop="gofgf">
          <img src="/static/icon/gof.png" alt="">
        </div>
        <div class="edpnfhd">
          <el-date-picker v-model="date" type="daterange" @change="srcdat(date)" unlink-panels range-separator="-"
            start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions">
          </el-date-picker>
        </div>
        <openlayers ref="baseMap" />
        <div class="lenghlist">
          <div v-show="islengh">
            <div class="llls">
              <img src="/static/images/zaixianrenyuan.png" alt="">
              <span>在线人员（{{ rylist.length }}）</span>
            </div>
            <div class="llls" v-for="(i, index) in lengh" :key="i.id" @click.stop="onfPoint(i)"
              :style="{ color: idjh.indexOf(i.id + '_Point') == -1 ? '#fff' : '#2efff2' }">
              <img :src="i.icon" alt="">
              <span>{{ i.name }}（{{ i.num }}）</span>
            </div>
          </div>
          <div @click.stop="islengh = !islengh">
            <img src="/static/images/shouqi.png" alt="">
          </div>
        </div>
      </div>

    </div>
    <!--中间 E-->
    <!--右边 B-->
    <div>
      <div class="ssls">
        <!--标题 B-->
        <div class="sstitles">
          <div class="twzs">
            <span class="dwz">人员在线列表</span>
            <br />
            <span class="xwz">People online list</span>
          </div>
        </div>
        <!--标题 E-->
        <div class="stjqy">
          <div class="bdbk table-cvix" style="height: 60%;">
            <table>
              <thead>
                <th>人员</th>
                <th>开始时间</th>
                <th>工作时长</th>
                <th>线路</th>
              </thead>
              <tbody>
                <tr v-for="(i, index) in rylist" :key="i.id">
                  <td><span v-for="is in i.renyuan" :key="i.id">{{ is.zhName }}</span></td>
                  <td>{{ i.startTime | cDate }}</td>
                  <td>{{ i.workDuration }}</td>
                  <td><span style="color: #2EFFF2;" @click.stop="getlookPath(i.lineId)">查看</span></td>
                </tr>
              </tbody>
            </table>
          </div>


          <div style="height: 40%; position: relative">
            <div class="llbt">
              <span class="dwz" style="line-height: 0">各站巡护距离统计</span>
              <br />
              <span class="xwz" style="line-height: 0">Patrol distance statistics of each station</span>
            </div>

            <div class="charts" id="bar3"></div>
          </div>
        </div>
      </div>
    </div>
    <!--右边 E-->
    <div class="sjpop" v-if="ispop">
      <div class="sjcdv">
        <div class="sjcloser" @click.stop="ispop = false">
          <i style="color: #fff; font-size: 0.24rem" class="el-icon-close"></i>
        </div>
        <div style="height: .16rem;"></div>
        <table>
          <thead>
            <th>事件图片</th>
            <th>事件名称</th>
            <th>发生时间</th>
          </thead>
          <tbody>
            <tr style="line-height: 1rem;" v-for="(i, index) in sjlist" :key="i.id">
              <td style="display: flex; height: 1rem; align-items: center;justify-content: center;">
                <el-image style="width: 100px; height: .8rem"
                  :src="i.imageUrl == '' ? '/static/images/np.jpg' : i.imageUrl"
                  :preview-src-list="i.imageUrl == '' ? [] : [i.imageUrl]">
                </el-image>
              </td>
              <td>发现植物</td>
              <td>2024-01-11 10:18</td>
            </tr>
          </tbody>
        </table>

      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import http from "../utils/http";
import api from "../utils/api";
import openlayers from '@/components/openlayers.vue'

export default {
  name: "xxjc",
  components: {
    openlayers
  },
  data() {
    return {
      ispop: false,
      date: "",
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      tclist: [
        {
          ico: "/static/images/xh1.png",
          name: "参加工作(人数)",
          num: 0,
          color: "#2EFFF2",
        },
        {
          ico: "/static/images/xh2.png",
          name: "巡护距离(km)",
          num: 0,
          color: "#FFF27F",
        },
        {
          ico: "/static/images/xh3.png",
          name: "巡护次数(次)",
          num: 0,
          color: "#917FFF",
        },
        {
          ico: "/static/images/xh4.png",
          name: "采集数据(条)",
          num: 0,
          color: "#34CEFF",
        },
      ],
      lengh: [
        {
          id: '00x1',
          icon: '/static/images/faxianzhiwu.png',
          name: '发现植物',
          num: 0,
          detail: []
        },
        {
          id: '00x2',
          icon: '/static/images/faxiandongwu.png',
          name: '发现动物',
          num: 0,
          detail: []
        },
        {
          id: '00x3',
          icon: '/static/images/fanghuoyinhuan.png',
          name: '防火隐患',
          num: 0,
          detail: []
        },
        {
          id: '00x4',
          icon: '/static/images/huoqing.png',
          name: '火情',
          num: 0,
          detail: []
        },
        {
          id: '00x5',
          icon: '/static/images/daofacaiyao.png',
          name: '盗伐采药',
          num: 0,
          detail: []
        },
        {
          id: '00x6',
          icon: '/static/images/daolie.png',
          name: '盗猎',
          num: 0,
          detail: []
        },
        {
          id: '00x7',
          icon: '/static/images/qinzhanlindi.png',
          name: '侵占林地',
          num: 0,
          detail: []
        },
        {
          id: '00x8',
          icon: '/static/images/fangmu.png',
          name: '放牧',
          num: 0,
          detail: []
        },
        {
          id: '00x9',
          icon: '/static/images/bingchonghai.png',
          name: '病虫害',
          num: 0,
          detail: []
        },
        {
          id: '00x10',
          icon: '/static/images/shebeisheshi.png',
          name: '设备设施',
          num: 0,
          detail: []
        },
      ],
      areaId: "",
      dataNum: 0,
      distance: 0,
      patrolNum: 0,
      personNum: 0,
      photoNum: 0,
      videoNum: 0,
      islengh: true,
      rylist: [],
      startTime: "",
      endTime: "",
      sjlist: [],
      idjh: []
    };
  },
  mounted() {
    this.getPatrolView()
    this.drawbar2('bar1', ["防护隐患", "发现火情", "盗伐采药", "盗猎", "侵占林地"], [10, 3, 5, 6, 7])
    this.drawbar2('bar2', ["发现动物", "发现植物", "放牧", "其他"], [2, 5, 8, 9]);
    this.getdistanceCount();
    this.getdistribution();
    this.getrealTimeInfo();
  },
  created() {
    this.areaId = window.sessionStorage.getItem("areaId");
  },
  methods: {
    gofgf() {
      this.$router.push('/fulls');
    },
    opensjo(data) {
      this.sjlist = data;
      this.ispop = true;
    },
    srcdat(daterange) {
      console.log(daterange);
      if (daterange != null && daterange != '') {
        var year = daterange[0].getFullYear();
        var month = daterange[0].getMonth() + 1;
        var date = daterange[0].getDate();
        this.startTime = year + "-" + month + "-" + date;
        var year = daterange[1].getFullYear();
        var month = daterange[1].getMonth() + 1;
        var date = daterange[1].getDate();
        this.endTime = year + "-" + month + "-" + date;
      } else {
        this.startTime = "";
        this.endTime = "";
      }
      this.getdistribution();
    },
    async getdistribution() {
      let res = await http.get(api.distribution, {
        areaId: this.areaId,
        startTime: this.startTime,
        endTime: this.endTime
      })
      if (res.data.code == '200') {

        res.data.data.forEach((e, x) => {
          this.lengh[x].num = res.data.data[x].number;
          this.lengh[x].detail = JSON.parse(JSON.stringify(res.data.data[x].detail));
        })
        // idjh
        let idjh = [];
        this.lengh.forEach(e => {
          if (e.detail.length > 0) {
            let arr = [];
            e.detail.forEach((si, x) => {
              let z = {
                id: x + 'fsknjdh9022hjshj',
                borderColor: '',
                fillColor: '',
                iconSrc: e.icon,
                data: {},
                geojson: { coordinates: [si.lon, si.lat], type: "Point" }
              }
              arr.push(z)
            })
            this.$refs.baseMap.previewshape(arr, e.id + "_Point");
            idjh.push(e.id + "_Point");
            this.idjh = idjh;
          } else {
            this.$refs.baseMap.delPoint(e.id + "_Point");
          }
        })

      }
    },

    onfPoint(data) {
      console.log(data);
      if (data.num > 0) {
        if (this.idjh.indexOf(data.id + "_Point") == -1) {
          let arr = [];
          data.detail.forEach((si, x) => {
            let z = {
              id: x + 'fsknjdh9022hjshj',
              borderColor: '',
              fillColor: '',
              iconSrc: data.icon,
              data: {},
              geojson: { coordinates: [si.lon, si.lat], type: "Point" }
            }
            arr.push(z)
          })
          this.$refs.baseMap.previewshape(arr, data.id + "_Point");
          this.idjh.push(data.id + "_Point");
        } else {
          this.idjh.splice(this.idjh.indexOf(data.id + "_Point"), 1);
          this.$refs.baseMap.delPoint(data.id + "_Point");
        }
      }
    },
    async getdistanceCount() {
      let res = await http.get(api.distanceCount + this.areaId)
      if (res.data.code == '200') {
        let x = [], y = [];
        res.data.data.forEach(e => {
          y.push(e.patrolDistance);
          x.push(e.name);
          this.drawbar3('bar3', x, y)
        })

      }
    },
    async getlookPath(id) {
      let res = await http.get(api.lookPath + id)
      if (res.data.code == '200' && res.data.data.length > 0) {
        let linlist = [];
        res.data.data.forEach((e, index) => {
          let a = [e.lon, e.lat];
          linlist.push(a);
        })
        let arr = [{
          id: 'e',
          name: "",
          size: 5,
          borderColor: "#ffa500",
          fillColor: "#ffa500",
          data: {},
          geojson: { coordinates: linlist, type: "LineString" }
        }]
        this.$refs.baseMap.previewshape(arr, "line_LineString");
        this.$refs.baseMap.flyPoint(linlist[0]);
      } else {
        this.$message({
          message: '该人员暂无路线数据',
          type: 'warning'
        });
      }
    },
    async getrealTimeInfo() {
      let res = await http.get(api.realTimeInfo + this.areaId)
      if (res.data.code == '200') {
        this.rylist = res.data.data;
        if (res.data.data.length > 0) {
          let arr = [];
          res.data.data.forEach((si, x) => {
            let z = {
              id: si.id,
              borderColor: '',
              fillColor: '',
              iconSrc: '/static/images/zaixianrenyuan.png',
              data: {},
              geojson: { coordinates: [si.lon, si.lat], type: "Point" }
            }
            arr.push(z)
          })
          this.$refs.baseMap.previewshape(arr, "renyuan_Point");
        }
      }
    },
    getPatrolView() {
      let vm = this;
      (async function f() {
        let year = new Date().getFullYear();
        let res = await http.get(
          api.getTotallPatrolView + vm.areaId + "&startTimeStr=" + year
        );
        vm.dataNum = res.data.dataNum.toFixed(0);
        vm.distance = res.data.distance.toFixed(0);
        vm.patrolNum = res.data.patrolNum.toFixed(0);
        vm.personNum = res.data.personNum.toFixed(0);
        vm.photoNum = res.data.photoNum.toFixed(0);
        vm.videoNum = res.data.videoNum.toFixed(0);
      })();
      (async function f() {
        let res = await http.get(
          api.getTotallPatrolView + vm.areaId + "&startTimeStr="
        );
        vm.tclist[3].num = res.data.dataNum.toFixed(0);
        vm.tclist[1].num = res.data.distance.toFixed(0);
        vm.tclist[2].num = res.data.patrolNum.toFixed(0);
        vm.tclist[0].num = res.data.personNum.toFixed(0);
      })();
    },
    drawbar2(demo, x, y) {
      let myChart = echarts.getInstanceByDom(document.getElementById(demo));
      if (myChart == null) {
        myChart = echarts.init(document.getElementById(demo));
      }
      let option = {
        xAxis: {
          type: "category",
          axisLabel: {
            color: "#fff"
          },
          data: x,
        },
        yAxis: {
          type: "value",
          axisLabel: {
            color: "#fff"
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "rgba(255, 255, 255, 0.1)",
            },
          },
        },
        grid: {
          top: "13%",
          left: "10%",
          right: "1%",
          bottom: "25%",
        },
        series: [
          {
            data: y,
            type: "bar",
            showBackground: true,
            label: {
              show: true,
              position: "top",
              color: "#fff",
            },
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                {
                  offset: 0,
                  color: "rgba(0, 41, 255, 0)",
                },
                {
                  offset: 1,
                  color: "rgba(18, 255, 255, 0.8)",
                },
              ])
            },
            backgroundStyle: {
              color: "rgba(255, 255, 255, 1)",
              opacity: 0.1,
            },
          },
        ],
      };
      myChart.setOption(option);
      setTimeout(function () {
        myChart.resize();
      }, 100);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
    drawbar3(demo, x, y) {
      let myChart = echarts.getInstanceByDom(document.getElementById(demo));
      if (myChart == null) {
        myChart = echarts.init(document.getElementById(demo));
      }
      let option = {
        xAxis: {
          type: "category",
          axisLabel: {
            color: "#fff",
            rotate: 30
          },

          data: x,
        },
        yAxis: {
          type: "value",
          axisLabel: {
            color: "#fff"
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "rgba(255, 255, 255, 0.1)",
            },
          },

        },
        grid: {
          top: "13%",
          left: "10%",
          right: "1%",
          bottom: "35%",
        },
        series: [
          {
            data: y,
            type: "bar",
            showBackground: true,
            label: {
              show: true,
              position: "top",
              formatter: '{c}\n Km',
              color: "#fff",
            },
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                {
                  offset: 0,
                  color: "rgba(0, 41, 255, 0)",
                },
                {
                  offset: 1,
                  color: "rgba(18, 255, 255, 0.8)",
                },
              ])
            },
            backgroundStyle: {
              color: "rgba(255, 255, 255, 1)",
              opacity: 0.1,
            },
          },
        ],
      };
      myChart.setOption(option);
      setTimeout(function () {
        myChart.resize();
      }, 100);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    }
  },
};
</script>

<style scoped>
@import "../../static/css/jbxx.css";
@import "../../static/css/xxjc.css";
</style>

<style>
.edpnfhd .el-input__inner {
  background: rgba(0, 77, 72, 0.70) !important;
}

.edpnfhd .el-date-editor .el-range-input {
  background: transparent !important;
  color: #fff !important;
}

.edpnfhd .el-range-separator {
  color: #fff !important;
}
</style>